<template>
    <div>
        <h1>待办事项</h1>
        <div class="common-layout">
            <el-container>
            <el-header><SonHeader @add="addHandle" /></el-header>
            <el-main><SonMain :list="list" @finish="changeDad" @cancer="cancaerDad" @del="del" /></el-main>
            <el-footer><SonFooter :list="list" @show="show" ></SonFooter></el-footer>
            </el-container>
        </div>
    </div>
</template>
<script>
import SonFooter from '@/components/ToDo/SonFooter.vue';
import SonHeader from '@/components/ToDo/SonHeader.vue';
import SonMain from '@/components/ToDo/SonMain.vue';

export default {
    components:{
        SonHeader,
        SonMain,
        SonFooter
    },
    data() {
        return {
            list:[{id:'001',content:'学习第一章',state:false,startDate:'2024-9-10',finishDate:''},
                 {id:'002',content:'学习第二章',state:false,startDate:'2024-10-10',finishDate:''}
        ],
        now:new Date(),
        copyList:[]
        }
    },
    created(){
        this.copyList = this.list.slice()
    },
    methods:{
        addHandle(val){
            this.list.push({
                id:+new Date(),
                content:val,
                state:false,
                startDate:this.fomateDate,
                finishDate:''
            })
            this.copyList = this.list.slice()
        },
        changeDad(i){
            this.list[i].finishDate = this.fomateDate
            this.copyList = this.list.slice()
        },
        cancaerDad(i){
            this.list[i].state = false
            this.copyList = this.list.slice()
        },
        del(i){
            this.list.splice(i,1)
            this.copyList = this.list.slice()
        },
        show(flag){
            if(flag == 'clear'){
                this.list = []
                this.copyList = []
            }
            else if(flag == 'done'){
                this.list = this.copyList.filter( v => v.state == true )
            }
            else if(flag == 'undo'){
                this.list = this.copyList.filter( v => v.state == false )
            }else{
                this.list = this.copyList.slice()
            }
        }
    },
    computed:{
        fomateDate(){
            let month = this.now.getMonth() + 1
            return this.now.getFullYear() + '-' + month + '-' + this.now.getDate()
        },
    }
}
</script>

<style>
#app{
    width: 800px;
    margin: auto;
}
</style>